<template>
    <header>
      <div class="left">
        <span v-if="obj.type == 1" @click="events(1)" :style="{background: 'url('+(faceUrl || faceImg)+') center no-repeat'}" class="face"></span>
        <span v-if="obj.type != 1" @click="events(2)" class="back"><i></i>返回</span>  
      </div>
      <div class="center">{{obj.text}}</div>
      <div class="right">
        <!-- <span v-if="obj.type == 2" @click="events(3)" class="morePower"></span> -->
        <span v-if="obj.type == 1" @click="events(4)" class="add"></span>
        <span v-if="obj.type == 4" @click="events(3)" class="del">删除</span>
        <span v-if="obj.type == 5" @click="events(5)" class="session"></span>
      </div>
    </header>
</template>
<script>
export default {
  props:{
    obj: Object,
    faceUrl:{
      default: null
    }

  },
  data () {
    return {
      faceImg: require("../../assets/img/expert/icon_my@1.5x.png")
    }
  },
  methods: {
    events(i){
      this.$emit('events', i);
    },
  }
}

</script>
<style lang="less">
  header {
    width: 3.75rem;
    height: .44rem;
    background: white;
    display: flex;
    position: relative;
    z-index: 10;
    div {
      /*width: 33%;*/
      display: flex;
      align-items: center;
      justify-content: center;
      color: #39393D;
      font-size: 0.18rem;
      &.left{
        width:25%;
        justify-content: flex-start;
        padding-left: .1rem;
        box-sizing: border-box;
        .del {
          font-size: .16rem;
        }
        .back {
          height: 100%;
          line-height: .2rem;
          display: flex;
          align-items: center;
          font-size: .16rem;
          i {
            width: .15rem;
            height: .2rem;
            background: url("../../assets/img/icon_shape@3x2.png")center center;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
        .face {
          width: .3rem;
          height: .3rem;
          border-radius: 50%;
          background: url("../../assets/img/expert/icon_my@1.5x.png");
          background-size: cover !important;
          background-repeat: no-repeat;
        }
      }
      &.center {
        font-weight: 500;
        flex: 1;
      }
      &.right{
        width:25%;
        justify-content: flex-end;
        padding-right: .1rem;
        box-sizing: border-box;
        .morePower {
          width: .21rem;
          height: .21rem;
          background: url("../../assets/img/person/icon_min02@3x.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
        .add{
          width: .2rem;
          height: .2rem;
          background: url("../../assets/img/icon_more@3x.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
        .session {
          width: .24rem;
          height: .24rem;
          background: url("../../assets/img/expert/icon_xx@3x.png");
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
  }
</style>
